<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <style>
        /* 基础样式保持不变 */
        body {
            margin: 0;
            padding: 0;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            overflow: hidden;
            color: #333;
        }

        /* 顶部导航栏 */
        .header {
            height: 56px;
            background-color: #409EFF;
            color: white;
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: fixed;
            width: 100%;
            z-index: 1000;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        }

        .header-title {
            font-size: 18px;
            font-weight: 500;
            margin-left: 12px;
        }

        .header-right {
            margin-left: auto;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
        }

        .collapse-btn {
            cursor: pointer;
            font-size: 20px;
            display: flex;
            align-items: center;
        }

        /* 商品目录按钮 */
        .product-catalog-btn {
            cursor: pointer;
            padding: 5px 15px;
            border-radius: 4px;
            transition: background-color 0.3s;
            margin-right: 10px;
            position: relative;
            background-color: rgba(255, 255, 255, 0.1);
            margin-left: 10px;
        }

        .product-catalog-btn:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        /* 商品目录下拉菜单 */
        .product-catalog-menu {
            position: absolute;
            top: 100%;
            left: 0;
            width: 800px;
            background-color: white;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 0;
            z-index: 1001;
            display: none;
            color: #333;
            border-left: 4px solid #67C23A;
        }

        .product-catalog-menu.show {
            display: flex;
        }

        .catalog-left {
            flex: 0 0 150px;
            background-color: #f5f7fa;
            padding: 10px 0;
        }

        .catalog-right {
            flex: 1;
            padding: 15px;
        }

        .catalog-title {
            padding: 12px 15px;
            cursor: pointer;
            font-size: 14px;
            color: #333;
            border-left: 3px solid transparent;
            position: relative;
        }

        .catalog-title:hover {
            background-color: #e6f7ff;
        }

        .catalog-title.active {
            background-color: #e6f7ff;
            border-left: 3px solid #409EFF;
            color: #409EFF;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }

        .product-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            padding: 10px;
            border-radius: 4px;
        }

        .product-item:hover {
            background-color: #f5f7fa;
        }

        .product-image {
            width: 60px;
            height: 60px;
            object-fit: contain;
            margin-bottom: 8px;
        }

        .product-name {
            font-size: 12px;
            color: #666;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
        }

        /* 关闭按钮 */
        .close-catalog {
            position: absolute;
            right: 10px;
            top: 10px;
            cursor: pointer;
            color: #999;
            font-size: 16px;
        }

        .close-catalog:hover {
            color: #333;
        }

        /* 用户头像区域 */
        .user-info {
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .user-info:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #67C23A;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            margin-right: 8px;
        }

        .user-name {
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* 下拉菜单 */
        .user-menu {
            position: absolute;
            top: 100%;
            right: 0;
            background-color: white;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 5px 0;
            min-width: 160px;
            z-index: 1001;
            display: none;
        }

        .user-menu.show {
            display: block;
        }

        .menu-item {
            padding: 8px 20px;
            cursor: pointer;
            color: #606266;
            font-size: 14px;
            display: flex;
            align-items: center;
        }

        .menu-item:hover {
            background-color: #f5f7fa;
            color: #409EFF;
        }

        .menu-item i {
            margin-right: 8px;
            font-size: 16px;
        }

        /* 主容器 */
        .app-container {
            display: flex;
            height: 100vh;
            padding-top: 56px;
        }

        /* 侧边菜单 */
        .side-menu {
            width: 220px;
            background-color: #fff;
            transition: width 0.3s;
            overflow: hidden;
            border-right: 1px solid #e6e6e6;
        }

        .side-menu.collapsed {
            width: 64px;
        }

        .menu-title {
            height: 56px;
            line-height: 56px;
            padding: 0 20px;
            font-size: 16px;
            font-weight: 500;
            color: #333;
            border-bottom: 1px solid #f0f0f0;
            white-space: nowrap;
        }

        .el-menu {
            border-right: none;
        }

        .el-menu-item {
            height: 48px;
            line-height: 48px;
            font-size: 14px;
        }

        .el-menu-item:hover {
            background-color: #f5f7fa;
        }

        .el-menu-item.is-active {
            color: #409EFF;
            background-color: #f0f7ff;
        }

        /* 主内容区 */
        .main-content {
            flex: 1;
            background-color: #f5f7fa;
            overflow: auto;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
            background-color: #fff;
        }

        /* 图标样式 */
        .el-icon {
            font-size: 18px;
            margin-right: 8px;
        }

        .collapsed .el-icon {
            margin-right: 0;
            font-size: 20px;
        }

        .collapsed .menu-title,
        .collapsed .el-menu-item span {
            display: none;
        }

        .main-content iframe {
            width: 100%;
            height: 100%;
            border: none;
            background-color: #fff;
            display: block; /* 防止iframe下方有空白 */
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 顶部导航栏 -->
    <div class="header">
        <div class="collapse-btn" @click="toggleCollapse">
            <i :class="isCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
        </div>
        <div class="header-title" @click="goToHomepage" style="cursor: pointer;">
            我的主页
        </div>

        <div class="product-catalog-btn" @click="toggleProductCatalog">
            <i class="el-icon-menu"></i>
        </div>

        <!-- 商品目录下拉菜单 -->
        <div class="product-catalog-menu" :class="{ 'show': showProductCatalog }">
            <div class="catalog-left">
                <div class="catalog-title"
                     v-for="(category, index) in catalogData"
                     :key="index"
                     @mouseenter="selectCategory(index)"
                     :class="{ 'active': activeCategoryIndex === index }">
                    {{ category.title }}
                </div>
            </div>
            <div class="catalog-right">
                <div class="product-grid">
                    <div class="product-item"
                         v-for="(product, i) in currentProducts"
                         :key="i"
                         @click="handleProductClick(product)">
                        <img :src="product.image" alt="" class="product-image">
                        <div class="product-name">{{ product.name }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 用户信息区域 -->
        <div class="header-right">
            <div class="user-info" @click="toggleUserMenu">
                <div class="user-avatar">{{ getUserInitial }}</div>
                <div class="user-name">{{ userName }}</div>
                <i class="el-icon-arrow-down" style="margin-left: 5px;"></i>
            </div>

            <!-- 用户菜单 -->
            <div class="user-menu" :class="{ 'show': showUserMenu }">
                <div class="menu-item" @click="goToPersonalCenter">
                    <i class="el-icon-user"></i>
                    <span>个人中心</span>
                </div>
                <div class="menu-item" @click="clearCache">
                    <i class="el-icon-delete"></i>
                    <span>清除缓存</span>
                </div>
                <div class="menu-item" @click="showOperations">
                    <i class="el-icon-setting"></i>
                    <span>操作</span>
                </div>
                <div class="menu-item" @click="editProfile">
                    <i class="el-icon-edit"></i>
                    <span>编辑</span>
                </div>
                <div class="menu-item" @click="logout" style="color: #F56C6C;">
                    <i class="el-icon-switch-button"></i>
                    <span>退出登录</span>
                </div>
            </div>
        </div>
    </div>

    <div class="app-container">
        <!-- 侧边菜单栏 -->
        <div class="side-menu" :class="{ 'collapsed': isCollapsed }">

            <el-menu
                    :default-active="activeIndex"
                    @select="handleSelect"
                    active-text-color="#409EFF"
                    :collapse="isCollapsed"
                    background-color="#fff"
                    text-color="#333">
                <el-menu-item index="personalCenter" >
                    <i class="el-icon-user"></i>
                    <span slot="title">个人中心</span>
                </el-menu-item>

                <!-- 修改密码 -->
                <el-menu-item index="shoppingCart" @click="goToPasswordUtils">
                    <i class="el-icon-lock"></i>
                    <span slot="title">修改密码</span>
                </el-menu-item>

                <!-- 订单列表 -->
                <el-menu-item index="shoppingCart" @click="goTomyorders">
                    <i class="el-icon-tickets"></i>
                    <span slot="title">订单列表</span>
                </el-menu-item>

                <!-- 地址管理 -->
                <el-menu-item index="shoppingCart" @click="goToaddress">
                    <i class="el-icon-location-outline"></i>
                    <span slot="title">地址管理</span>
                </el-menu-item>

                <!-- 购物车标题 -->
                <el-menu-item index="shoppingCart" @click="goToShoppingCart">
                    <i class="el-icon-shopping-cart-2"></i>
                    <span slot="title">购物车</span>
                </el-menu-item>

                <!-- 收藏夹标题 -->
                <el-menu-item index="favorites" @click="goToFavorites">
                    <i class="el-icon-star-off"></i>
                    <span slot="title">收藏夹</span>
                </el-menu-item>
                <!-- 使用v-for动态渲染菜单项 -->
<!--                <el-menu-item-->
<!--                        v-for="item in menuData"-->
<!--                        :key="item.categoryId"-->
<!--                        :index="item.categoryId.toString()">-->
<!--                    <i :class="getMenuIcon(item.categoryId)"></i>-->
<!--                    <span>{{item.categoryName}}</span>-->
<!--                </el-menu-item>-->
            </el-menu>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <iframe
                    :src="currentUrl"
                    name="content"
                    frameborder="0"
                    style="width: 100%; height: 90%;  overflow: auto">
            </iframe>
        </div>
    </div>
</div>
</body>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css">

<script>
    var app = new Vue({
        el: "#app",
        data() {
            return {
                activeIndex: '1',
                isCollapsed: false,
                currentUrl: 'homepage.html',
                userName: '', // 用户名
                userId: 1,
                menuData: [], // 初始为空，将从数据库获取
                isLoggedIn: true, // 登录状态
                showUserMenu: false, // 是否显示用户菜单
                showProductCatalog: false, // 是否显示商品目录
                activeCategoryIndex: 0,
                catalogData: [],

                catalogTimer: null
            };
        },
        computed: {
            getUserInitial() {
                return this.userName ? this.userName.charAt(0) : 'U';
            },
            currentProducts() {
                return this.catalogData[this.activeCategoryIndex].products;
            }
        },
        created() {
            this.checkLoginStatus();
            this.fetchMenuData();
            this.fetchCatalogData();
            document.addEventListener('click', this.handleDocumentClick);
            // 监听iframe传递的消息
            window.addEventListener('message', function(event) {
                if (event.data.type === 'changePage') {
                    // 切换嵌套页面
                    this.currentUrl = event.data.url;

                    // 如果有参数，传递给新页面
                    if (event.data.params) {
                        // 这里需要根据您的实际框架实现参数传递
                        // 例如通过URL参数或全局变量
                        const iframe = document.querySelector('iframe');
                        iframe.src = event.data.url + '?' + new URLSearchParams(event.data.params).toString();
                    } else {
                        document.querySelector('iframe').src = event.data.url;
                    }
                }
            });
            // 监听iframe传递的消息
            window.addEventListener('message', (event) => {
                if (event.data.type === 'changePage') {
                    // 切换嵌套页面
                    if (event.data.params) {
                        // 构造带参数的URL
                        const params = new URLSearchParams(event.data.params);
                        this.currentUrl = `${event.data.url}?${params.toString()}`;
                    } else {
                        this.currentUrl = event.data.url;
                    }
                }
            });
        },
        methods: {
            selectCategory(index) {
                this.activeCategoryIndex = index;
            },
            fetchMenuData() {
                axios({
                    method: 'get',
                    url: '/user/getMenu'
                }).then(resp =>{
                    if (resp.data.code === 20041) {
                        this.menuData = resp.data.data;
                    }
                });
            },
            checkLoginStatus() {
                axios({
                    method: 'get',
                    url: '/user/getLoginAcc'
                }).then(resp => {
                    if (resp.data.code === 20041) {
                        this.userName = resp.data.data.username;
                        this.userId = resp.data.data.userId;
                        this.isLoggedIn = true;
                    }
                });
            },
            toggleUserMenu() {
                this.showUserMenu = !this.showUserMenu;
                this.showProductCatalog = false;
            },
            logout() {
                axios({
                    method: 'post',
                    url: '/user/logout'
                }).then(resp => {
                    this.isLoggedIn = false;
                    window.location.href = 'login.html';
                });
            },
            goToHomepage(){
                this.currentUrl = 'homepage.html'
            },
            goToPersonalCenter() {
                this.currentUrl = '/personal-center';
                this.showUserMenu = false;
            },
            clearCache() {
                this.$message.success('缓存已清除');
                this.showUserMenu = false;
            },
            showOperations() {
                this.$message.info('操作功能');
                this.showUserMenu = false;
            },
            editProfile() {
                this.$message.info('编辑个人资料');
                this.showUserMenu = false;
            },
            getMenuIcon(menuId) {
                const icons = {
                    1: 'el-icon-location',
                    2: 'el-icon-star-off',
                    3: 'el-icon-shopping-cart-2',
                    4: 'el-icon-document',
                    5: 'el-icon-tickets'
                };
                return icons[menuId] || 'el-icon-menu';
            },
            handleSelect(key) {
                const selectedMenu = this.menuData.find(item => item.categoryId.toString() === key);
                if (selectedMenu && selectedMenu.url) {
                    this.currentUrl = selectedMenu.url;
                }
            },
            toggleCollapse() {
                this.isCollapsed = !this.isCollapsed;
            },
            toggleProductCatalog() {
                this.showProductCatalog = !this.showProductCatalog;
                this.showUserMenu = false;
            },
            closeProductCatalog() {
                this.showProductCatalog = false;
            },
            handleDocumentClick(e) {
                const catalogBtn = this.$el.querySelector('.product-catalog-btn');
                const catalogMenu = this.$el.querySelector('.product-catalog-menu');
                if (!catalogBtn.contains(e.target) && !catalogMenu.contains(e.target)) {
                    this.showProductCatalog = false;
                }
            },
            handleCatalogMouseLeave() {
                // 添加延迟关闭，避免鼠标移出时立即关闭
                this.catalogTimer = setTimeout(() => {
                    this.showProductCatalog = false;
                }, 300);
            },
            fetchCatalogData() {
                axios({
                    method: 'get',
                    url: '/category/catalog'
                }).then(resp => {
                    if (resp.data.code === 20041) {
                        this.catalogData = resp.data.data;
                    }
                }).catch(error => {
                    console.error('获取分类数据失败:', error);
                    this.$message.error('获取分类数据失败');
                });

            },
            goToShoppingCart() {
                if (this.userId) {
                    this.currentUrl = `shoppingcarts.html`;
                    this.activeIndex = 'shoppingCart';
                } else {
                    this.$message.error('用户ID不存在，请重新登录');
                    // 可以在这里添加重新登录的逻辑
                }
            },
            goToPasswordUtils() {
                if (this.userId) {
                    this.currentUrl = `PasswordUtils.html`;
                } else {
                    this.$message.error('用户ID不存在，请重新登录');
                    // 可以在这里添加重新登录的逻辑
                }
            },
            goToaddress() {
                if (this.userId) {
                    this.currentUrl = `address.html`;
                } else {
                    this.$message.error('用户ID不存在，请重新登录');
                    // 可以在这里添加重新登录的逻辑
                }
            },
            goTomyorders() {
                if (this.userId) {
                    // 修改为加载订单列表页面
                    this.currentUrl = `myorders.html`;
                    this.activeIndex = 'shoppingCart'; // 根据需要调整activeIndex
                } else {
                    this.$message.error('用户ID不存在，请重新登录');
                }
            },
            goToFavorites(){
                if (this.userId) {
                    this.currentUrl = `favorites.html`;
                } else {
                    this.$message.error('用户ID不存在，请重新登录');
                }
            },
            goToHomepage() {
                this.currentUrl = 'homepage.html'
            }
        }
    });
</script>
</html>